/*-------背景-------*/
body{
	background-image:url("../pic2025/n25_dot.png");
}
/*-------文字-------*/
.tra_zentai{
	font-family:"BIZ UDGothic", sans-serif;
	font-weight:400;
	font-style:normal;
	text-align:center;
}

/*--------すべて開く・閉じるボタン--------*/
.kaihei{
	margin:5% 4% 0 4%;
}

.kaihei button{
	font-family:"BIZ UDGothic", sans-serif;
	font-weight:bold;
	letter-spacing:0.4em;

	color:#83A6CD;
	background-color:white;
	border-top: 4px solid #83A6CD;
	border-right: 4px dashed #F37587;
	border-bottom: 6px double #ffb6c1;
	border-left: 7px dotted #00ced1;
	
	padding:15px 50px;
	border-radius:10px;
	width:30%;
	
	overflow:hidden;
	position:relative;
	z-index:1;
	
	cursor:url('../pic2025/n25_cursor/n25_えんぴつ(training).png'),pointer;/*カーソル*/
}

.kaihei button:hover{
	color:white;
}

.kaihei button::before{
	content:'';
	width:100%;
	height:100%;
	background-color:#CDDBEB;
	
	position:absolute;
	left:0;
	top:-100%;
	transition:0.5s;
	z-index:-1;
}

.kaihei button:hover::before{
	top:0;
}

/*-------月-------*/
.month{
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	color:white;
	background-color:#83a6cd;
	border-radius:60px;
	width:100%;
	margin:auto;
	margin-top:20px;
	height:35px;
}

/*-------記述部背景等-------*/
section{
	background-color:#fff0f5;
	background-color: rgba(255,240,245,0.7);
	margin:auto;
	margin-top:30px;
	padding:30px 20px 20px 20px;
	border-radius:60px;
}
/*---------------------------------------------------------------------------------------------*/
/*-------各研修ボタン-------*/
summary {
	position: relative;
	display:flex;
	padding-left: 20px; /* アイコン分の余白 */
	cursor:url('../pic2025/n25_cursor/n25_えんぴつ(training).png'),pointer;/*カーソル*/
	
	text-align:center;
	align-items:center;
	justify-content:center;
	color:white;
	background-image:url(../pic2025/n25_hosogra.png);
	border-radius:60px;
	width:65%;
	margin:auto;
	margin-top:20px;
	margin-bottom:10px;
	height:35px;
	background:linear-gradient(to right, #F697A4
 0%, #f697a4 25%, #FFC9D1 50%, #f697a4 75%, #F697A4
 100%);
	background-position:0 50%;
	background-size:200% auto;
	transition: background-position 0.5s ease-in-out;
}
 
/*-------矢印を消す-------*/
summary::-webkit-details-marker {
	display: none;
}
 
/*-------疑似要素でアイコンを表示-------*/
summary:before,
summary:after {
	content: "";
	margin: auto;
	position:absolute;
	top: 0;
	bottom: 0;
}
 
summary:before {
	width: 20px;
	height: 20px;
}
 
summary:after {
	left:6%;
	width: 5px;
	height: 3px;
	border: 6px solid transparent;
	border-left: 7px solid white;
	box-sizing: border-box;
}
/*-------オープン時-------*/
details[open] summary {
	background:#f9bfc7 ;
}
details[open] summary:after {
	transform: rotate(90deg); /* 90度回転 */
	left:5.4%;
	top:5px;
}

/*------summaryカーソル置くと光る--------*/ 

summary:hover {
	background-position:100% 50%;
}

/*------------summary開くときのアニメーション------------*/
.fuwatto{
	animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
	0%{
		opacity: 0; 
		transform: translateY(-3px); 
	}
	100%{
		opacity:1;
		transform:none;
	}
}
/*------------スクロールに合わせて表示------------*/
.fuwatto{	
	animation:fadeIn linear both;
	animation-timeline:view(block);
	animation-range:entry 0% contain 10%;
}
.fuwatto, .etc, .programming{	
	animation:fadeIn linear both;
	animation-timeline:view(block);
	animation-range:entry 0px contain 1px;
}
@keyframes fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
.fuwatto{
	animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
	0%{
		opacity: 0; 
		transform: translateY(-3px); 
	}
	100%{
		opacity:1;
		transform:none;
	}
}
/*--------------------------------------------------------------------------------------------------*/
 
/*-------説明文-------*/
.tra_zentai p,.etc, .bubble a{
	text-align:left;
	color:#223a70;
	padding:20px;
	line-height:1.5;
}

section h3{
	font-size:120%;
}

h4{
	font-size:110%;
	font-weight:375;

}

.train_bun1, .train_bun2, .programming, kengaku{
	display:inline-block;
}
/*-------写真-------*/
details ul img{
	width:375px;
	border-radius:20px;
	border:double 10px white;
}

.sakusei{
	margin-top:30px;
}

/*-------イラスト-------*/
.gaibukenshu{
	width:180px;
	hight:100%;
	border:none;
}

.server{
	width:180px;
	hight:100%;
	padding-top:70px;
	border:none;
}

.notepc{
	width:140px;
	hight:100%;
	border:none;
}

/*-------画像と文を並べる（リスト)-------*/
details ul{
	display:flex;
	justify-content:center;
	align-items:center;
	padding-top:15px;
	padding-bottom:25px;
	gap:35px;
}


/*-------その他の研修・小見出し-------*/
.sonota{
	text-align:center;
	font-weight:600;
	color:white;
	background-color:#ac8ee8;
	border-radius:30px;
	width:60%;
	height:50px;
	padding:0% 5%;
	margin:auto;
	margin-bottom:40px;

	display:flex;
	align-items:center;
	justify-content:center;
	position: relative;
}


/*----------------コメント部分----------------*/
/*--------初心者--------*/
.shoshinsha{
	position:absolute;
	width:100px;
	border:none;
	margin-left:5%;
	margin-top:3%;
}

.bubble{
	position: relative;
	display: inline-block;
	margin:0 0 0 30%;
	padding: 3%;
	min-width: 200px;
	max-width: 100%;
	background-color:white;
	border-radius:20px;
}
/* 円アイコン1 */
.bubble:before, .bubble_hakken:before{  
	content:"";
	position:absolute;
	left: -38px;
	width: 13px;
	height: 12px;
	bottom: 0;
	background:white;
	border-radius:50%;
}
/* 円アイコン2 */
.bubble:after, .bubble_hakken:after{
	content:"";
	position:absolute;
	left:-24px;
	width:20px;
	height:18px;
	bottom:3px;
	background:white;
	border-radius:50%;
}
.bubble a, .bubble_hakken a{
	font-size:16px;
	padding:3%;
	display:inline-block;
}

/*--------男の子--------*/
.hakken{
	position:absolute;
	width:100px;
	border:none;
	margin-left:22%;
	margin-top:5%;
}
.bubble_hakken{
	position: relative;
	display: inline-block;
	margin:0 5% 5% 40%;
	padding: 3%;
	width:35%;
	min-width: 200px;
	max-width: 100%;
	background-color:white;
	border-radius:20px;
}
/*-----------------------------------モバイル対応-----------------------------------*/
@media(width <= 1000px){
	details ul{
		flex-direction:column;		/*画像と文を縦に並べる*/
		gap:0px;
		padding:0px;
	}
	details ul img{
		width:400px;		/*画像の大きさ調整*/
	}
	.server, .notepc{
		display:none;	/*一定サイズ以下の時にイラスト表示しない*/
	}
	.shoshinsha{	/*女の子大きさ調整*/
		margin-top:5%;
	}
	.hakken{	/*男の子大きさ調整*/
		margin-left:13%;
		margin-top:5%;
	}
	.kaihei{
		margin:5% 4% -1.5% 4%;
	}
	.kaihei button{
		padding:13px 10px;
		width:47%;
	}
	.sonota{
		margin-bottom:15px;
	}
}

@media(width <= 750px){
	.shoshinsha{	/*女の子大きさ調整*/
		margin-left:2%;
		margin-top:8%;
	}
	.hakken{	/*男の子大きさ調整*/
		width:85px;
		margin-left:6%;
		margin-top:8%;
	}

	.bubble_hakken{
		margin:0 0 3% 35%;
	}
	.bubble, .bubble_hakken{
		font-size:13px;
	}
}

@media(width <= 600px){
	details ul img{
		width:100%;		/*画像の大きさ調整*/
		margin-left:-4%;
	}
	.gaibukenshu{
		margin:0;
	}
	.shoshinsha{	/*女の子大きさ調整*/
		width:70px;
		margin-left:1%;
		margin-top:15%;
	}
	.bubble{	/*女の子吹き出し大きさ調整*/
	margin:0 5% 0 35%;
	}
	.kengaku{
		margin-bottom:30px;
	}
	.hakken{	/*男の子大きさ調整*/
		margin-left:-40px;
		margin-top:12%;
	}
	.shakaijin{
		margin-top:30px;
	}
	section h3, .sonota{
		font-size:100%;
	}
	.kaihei{
		margin:4% 1% -2% 1%;
	}
	
	.kaihei button{
		padding:10px 20px;
		width:45%;
	}
}

@media(width <= 450px){
	.shoshinsha{	/*女の子大きさ調整*/
		margin-left:0;
		margin-top:18%;
	}
	.midashi_EN{
		font-size:12px;
	}
}

@media(width <= 400px){
	.shoshinsha{	/*女の子大きさ調整*/
		margin-left:-5px;
		margin-top:20%;
	}
	.kaihei button{
		padding:10px 20px;
		width:40%;
		letter-spacing:0.2em;
	}
}

@media(width <= 380px){
	.kaihei button{
		padding:10px 20px;
		width:45%;
		letter-spacing:0.1em;
	}
}

@media(width >= 1500px){
	.shoshinsha{	/*女の子大きさ調整*/
		margin-left:4%;
		margin-top:2%;
	}
	.hakken{	/*男の子大きさ調整*/
		width:110px;
		margin-left:25%;
	}
}

@media(width >= 2000px){
	.shoshinsha{	/*女の子大きさ調整*/
		margin-left:3%;
		margin-top:1%;
	}
	.kengaku{	/*男の子非表示*/
		display:none;
	}
}

@media(width >= 2700px){
	.shoshinsha{	/*女の子大きさ調整*/
		margin-left:2%;
		margin-top:0.5%;
	}
}
/*----------------------------------キラキラ部分----------------------------------*/

.button {
	position: relative;
}

.star {
  position: absolute;
  display: block;
  width: 10px; /* キラキラの横幅を指定 */
  height: 10px; /* キラキラの縦幅を指定 */
  background-image: url("../pic2025/n25_glitter/n25_star-yellow.svg"); /* キラキラの画像のパスを記入 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  animation: button 1s;
  pointer-events: none;
}

/* キラキラが発生するアニメーション */
@keyframes button {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes button1 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}
/*-------------------------キラキラ部分終わり------------------------*/
/*--------ハンバーガーメニュー--------*/
/*位置調整*/
.nav-fade__list{
	margin-top:10%;
}
.nav-fade__list1 .nav-fade__item{
	padding-left:0;
}

/* 横画面（ランドスケープモード）の場合 */
@media only screen and (orientation: landscape) {
	/*↓ハンバーガーメニュースクロールさせる↓*/
	.nav-fade__wrapper{
		height:100vh;
		overflow-x:hidden;
		overflow-y:scroll;
	}
	/*ハンバーガーメニューの言語選択を横に並べる*/
	.nav-fade__list1 .nav-fade__item{
		display: inline-block;
		padding-left:15px;
	}	
}